<template>
	<view class="">
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search" @click="backSearch">
				<image class="search-img" src="../../static/images/realestate/cha@3x.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				婚姻登记信息查询
			</view>
			<view class="search2-top-right">
				<image class="search2-top-right-img" src="../../static/images/marriage/Frame26@3x.png" mode=""></image>
			</view>
		</view>
		
		<view class="center" style="background-image: url('../../static/images/marriage/bg.png');">
			<view class="center-text">
				如查询到的信息与实际情况不一致（如缺失、错误等），请咨询婚姻登记机关，我们将为您提供指导和服务。
			</view>
			<view class="" v-for="(item,index) in userList" :key="index">
				<view class="center-card" v-if="item.cid==3">
					<image class="bg-card" src="../../static/images/marriage/xiaxin.png" mode=""></image>
					<view class="card-top">
						<view class="left">
							登记类型：
						</view>
						<view class="right">
							<image class="xin" src="../../static/images/marriage/xin.png" mode=""></image>
							<span>结婚登记</span>
						</view>
					</view>
					<view class="content" v-if="userInfo.card==item.number_w">
						<p class="p1">姓名：{{item.name_w}}</p>
						<p class="p1" style="border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;">身份证号：{{item.number_w}}</p>
						<p class="p1">登记时间：{{item.dengji_time}}</p>
					</view>
					<view class="content" v-if="userInfo.card==item.number_m">
						<p class="p1">姓名：{{item.name_m}}</p>
						<p class="p1" style="border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;">身份证号：{{item.number_m}}</p>
						<p class="p1">登记时间：{{item.dengji_time}}</p>
					</view>
					<view class="look" @click="detailFn(item)">
						查看详情
					</view>
				</view>
				<view class="center-card"  v-if="item.cid==4">
					<!-- <image class="bg-card" src="../../static/images/marriage/xiaxin.png" mode=""></image> -->
					<image  class="bg-card" src="../../static/images/marriage/leilan.png" mode=""></image>
					<view class="card-top" style="background-color: #d3def0;">
						<view class="left">
							登记类型：
						</view>
						<view class="right">
							<!-- <image class="xin" src="../../static/images/marriage/xin.png" mode=""></image> -->
							<image  class="xin" src="../../static/images/marriage/lan.png" mode=""></image>
							<span style="color: #3e6ce1;">离婚登记</span>
						</view>
					</view>
					<view class="content" v-if="userInfo.card==item.number_w">
						<p class="p1">姓名：{{item.name_w}}</p>
						<p class="p1" style="border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;">身份证号：{{item.number_w}}</p>
						<p class="p1">登记时间：{{item.dengji_time}}</p>
					</view>
					<view class="content" v-if="userInfo.card==item.number_m">
						<p class="p1">姓名：{{item.name_m}}</p>
						<p class="p1" style="border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;">身份证号：{{item.number_m}}</p>
						<p class="p1">登记时间：{{item.dengji_time}}</p>
					</view>
					<view class="look" @click="detailFn(item)">
						查看详情
					</view>
				</view>
			</view>
			<view class="back" @click="backFn">
				返回
			</view>
		</view>
		
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	import { getUserInfo,getMarryInfoList } from '@/api/user'
	const userStore = useUserStore()
	const { userInfo } = storeToRefs(userStore)
		onShow(() => {
		    userStore.getUser()
			console.log(userInfo.value,'userInfo');
		})
		
		
const info=ref({})

onShow(()=>{
			 getinfo()
			 // getList()
	})
const getinfo=async()=>{
		const data=await getUserInfo()
		info.value=data
		// console.log(info.value,'info.value');
		getList()
	}

	const backFn = () => {
		uni.navigateBack(-1)
	}
	const backSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search1'
		})
	}
	
	
	const url='/pages/marriageregistration/detail'
	const detailFn=(item)=>{
		const params = encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
			 url: `${url}?params=${params}`
		})
		// uni.navigateTo({
		// 	url:'/pages/marriageregistration/detail'
		// })
	}
	
	const userList=ref([])
	const getList=()=>{
		if(info.value.sex == '女'){
			getMarryInfoList({number_w:info.value.card,number_m:''}).then(res=>{
				userList.value=res
				console.log(userList.value,'userList.value');
				
			})
		}else{
			getMarryInfoList({number_w:'',number_m:info.value.card}).then(res=>{
				userList.value=res
				console.log(res,'2222');
			})
		}
	}
</script>

<style scoped lang="scss">
	.search2-top {
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;
	
		.search2-top-left {
			width: 10%;
	
			.search2-top-left-img {
				width: 88rpx;
				height: 88rpx;
			}
		}
	
		.search {
			width: 10%;
	
			.search-img {
				width: 88rpx;
				height: 88rpx;
			}
		}
	
		.search2-top-center {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 65%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}
	
		.search2-top-right {
			width: 15%;
			display: flex;
	
			.search2-top-right-img {
				width: 80rpx;
				height: 80rpx;
			}
	
		}
	
	}
	
	.center{
		width: 100%;
		height: 484rpx;
		background-size: 100% 100%;
		position: relative;
		// width: 100%;
		padding-left: 4%;
		padding-right: 4%;
		.center-text{
			padding-top: 60rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
		}
		.center-card{
			height: 400rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 36rpx;
			position: relative;
			.bg-card{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 115rpx;
				height: 97rpx;
			}
			.card-top{
				display: flex;
				height: 88rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				background: #FFEDDA;
				// opacity: 1;
					border-radius: 16rpx 16rpx 0 0;
				.left{
					line-height: 88rpx;
					width: 70%;
				}
				.right{
					width: 30%;
					line-height: 88rpx;
					text-align: right;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FF8E1D;
				
					.xin{
						width: 40rpx;
						height: 40rpx;
						display: inline-block;
						vertical-align: middle;
					}
					
				}
			}
			.content{
			
				.p1{
					padding-left: 40rpx;
					padding-right: 40rpx;
					padding-top: 26rpx;
					padding-bottom: 26rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					
				}
			}
			.look{
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				width: 170rpx;
				height: 76rpx;
				background: rgba(20,119,255,0.2);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #1477FF;
				text-align: center;
				line-height: 76rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1477FF;
		
		
			}
		}
		.back{
			margin-top: 56rpx;
			text-align: center;
			line-height: 84rpx;
			height: 84rpx;
			background: #1477FF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 60rpx;
			
		}
	}
</style>